<template>
  <div class="ps-box" :style="bgImagUrl ? {backgroundImage:'url('+bgImagUrl+')'} : {} " :class="liveBoxClass">
    <!-- 前置图片div -->
    <div class="front-pictures-box">
      <div class="front-img-top" v-if="isFrontImg">
        <div class="front-top" :style='"backgroundImage: url("+`${frontTopImg}`+")"'></div>
      </div>
      <VideoCom ref='videoCom'  :videoInfo='videoInfo.videoInfo' type='hScreen' status="liveback"
        :progressShow="progressShow" :playBtnShow="playBtnShow" @getVideoLoading="getVideoLoading"
        @playStatus="playStatus" :progressL="progressL" @getProgress="getProgress" :courseInfo="courseInfo" :playBtn="playBegin" />
      <div class="front-img-bottom" v-if="isFrontImg">
        <div class="front-bottom" :style='"backgroundImage: url("+`${frontBottomImg}`+")"'></div>
      </div>
    </div>
    <div class="header-content">
      <WxOpenApp />
      <div class="wrap-content"  :class="marginTopClass">
        <div class="headline-box">
          <img @click="clickHeadImg"
            :src="videoInfo.videoInfo.userAnchor.headImg + '?x-oss-process=image/resize,m_fixed,h_60,w_60'" />
          <div class="middle-box">
            <p class="live-name">{{videoInfo.videoInfo.userAnchor.nickname}}</p>
            <p class="view-num">{{videoInfo.fwCount | filterViewNum(1)}}观看</p>
          </div>
          <div class="colltect-live" @click.stop="clickHeader('attention')" :class="[isAttention?'colltect-live-gray':'colltect-live-red']">
              {{isAttention?'已关注':'关注'}}
          </div>
          <!-- <img v-if="isToggle" @click="reportBtn" class="report-img" src="../../../../assets/images/report.png"> -->
        </div>
        <div class="wrap-right-box">
          <div class="header-right-box">
            <div class="float-video" v-if="isComputedFloatVideoBtn"  @click.stop="clickHeader('floatVideo')">
            </div>
            <div class="invite-btn"  v-if="isInvitaCard"  @click.stop="clickHeader('inviteBtn')">
            </div>				
            <div :class="['close']" v-if="isShowClose" @click.stop="closeBtn">
              <!-- <van-icon name="cross" size="1.2rem" color="#FFFFFF" /> -->
            </div>
          </div>
          <!-- 右上活动组件 -->
          <ActiveRightTop @click.native='clickActivity("rightTop")' :dataArray='activityArray[2]' v-if="isActivity[2]" />
        </div>       
      </div>      
    </div>   
    <div class="invite-list-count-down-box">
      <div class="header-left-top-box" v-if="isTencentLive">				
        <div class="invite-box" v-if="haveSummary" @click="clickSummary">
          <img src="../../../../assets/images/meetingSummary.png" />
          <p>会议纪要</p>
        </div>
        <div class="scan-box" v-if="haveMaterial" @click="clickMaterial">
          <img src="../../../../assets/images/meetingMaterial.png" />
          <p>会议材料</p>
        </div>
      </div>
      <div class="invite-pancel" v-if="showInviteBtn" @click="openFooterSheet('invite')">
        <!--邀请榜按钮组件-->
        <InviteBoxCom :inviteTitle="inviteTitle"  />
      </div>
      <!-- 左上活动组件 -->
      <ActiveLeftTop :dataArray='activityArray[0]' v-if="isActivity[0]" @formChildMsg='formChildData' />
    </div>

    <!-- <div :class="[videoCoverBoxClass]" v-if="videoCoverBox" v-show="!isCourseCoverImg">
      <div class="loadingGif" v-show="imgLoading||(!imgLoading&&videoLoading&&!isPlayBtn)"></div>
      <img class="cover-video-img" :src="videoInfo.videoInfo.preImagUrl"
        v-show="videoInfo.videoInfo.preImagUrl && videoInfo.videoInfo.preImagUrl != '' " />
      <div class="play-btn" v-if="isPlayBtn" @click="playBtn"></div>
    </div> -->
    <div class="course_video_cover_wrap" v-if="isCourseCoverImg">
      <CourseVideoCover :mode="videoInfo.videoInfo.mode" :videoInfo = 'videoInfo'  :courseInfo="courseInfo" @formChildMsg='formChildData' />
    </div>
    <div class="message-box-ps">
      <!-- 左下活动组件 -->
      <ActiveLeftBottom @click.native='clickActivity("leftBottom")' :dataArray='activityArray[1]' v-if="isActivity[1]" typeFrom='psBack' />
      <!-- 左下课程列表 -->
      <div class="left_bottom_course_list" @click="openPopup"  v-if="isCourseBtn">
        <i></i>
        <span>课程列表</span>
      </div>
      <!-- <ul class="message-box-ul">
        <li class="message-box-li">
          <img :src="$store.state.SysOrgInfo.icon + '?x-oss-process=image/resize,m_fixed,h_45,w_45'" />
          <span class="nick-name">{{$store.state.SysOrgInfo.name}}：</span><span class="message-text"
            v-html="videoInfo.videoInfo.memo"></span>
        </li>
      </ul> -->
      <MessageCom  :videoInfo = 'videoInfo' />
    </div>
    <!-- 快捷消息回复 -->
    <div class="quickMessage" v-show="$store.state.clearDom[0].open">
      <ul>
      	<li v-for="(item,index) in quickMessageList" :key="index" @click="clickmessage(item)">{{item}}</li>
      </ul>
    </div>
    <!--底部黑色渐变-->
    <div class="gradient-color-bg"></div>
    

    <!--右侧互动组件-->
    <InteractionRightLookBackCom :activityArray='activityArray'  :videoInfo='videoInfo' @formChildMsg='formChildData' />
    <!--totalNum 留言数   hdCount  点赞数   shoppingNum 商品数量-->
    <FooterCom :videoInfo='videoInfo' :shoppingDataInfo='shoppingDataInfo'
      :totalNum='totalNum' :hdCount='videoInfo.hdCount' @formChildMsg='formChildData' :quickMessage='quickMessage'/>
    <!--弹出框组件-->
    <transition name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
      @after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
      <component
        :is='isFooterCom' :activeDataArray='activeDataArray' :activeTitle='activeTitle' :videoInfo='videoInfo'
        pageType="lookBackPage" :totalNum='totalNum'  :isPoScreen="true" @formChildMsg='formChildData'
      />
    </transition>
    <!--邀请卡组件-->
    <InvitationCard v-if='isInvitationCard' @formChildMsg='formChildData' fromComPage = "back" :liveInfo="videoInfo.videoInfo"
      :fromCom="fromCom" />
    <!-- 播放进度 组件 -->
    <PlayProgress :progressShow="progressShow" :playBtnShow="playBtnShow" @playStatus="playStatus" :progress="progress"
      @changeProgress="changeProgress" :changeSpeedOut="changeSpeedOut" :mode='videoInfo.videoInfo.mode' />
    <!-- 透明蒙层 -->
    <ShowMask v-if="showMask" @formChildMsg='formChildData' />
    <!-- 全局背景层组件 -->
    <GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
    <!-- 填写中奖信息 组件 -->
      <transition name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
        @after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
        <ApplyInfo v-if="isApplyInfo" :videoInfo="videoInfo" @formChildMsg='formChildData'></ApplyInfo>
      </transition>
       <!-- 赞动画 -->
     <ZanAnimation></ZanAnimation>
     <canvas class="canvas-box" ref="canvasBox" id="canvasBox"></canvas>

    <!-- <img  class="canvas-img" :src="canvasImg" > -->
    <!-- 举报留言弹窗 -->
		<van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
				:position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
				:style="{width:popupObj.width,height:popupObj.height,left : $store.state.isMobile ? 0 : 'calc(50% - 200px)' }"  @click-overlay = "clickVanOverlay" >
				<component :is="isPopupCom"  :meetingMsg="meetingMsg" :shoppingDataInfo='shoppingDataInfo' :reportMsgObj="reportMsgObj" :courseInfo="courseInfo" typeFrom="psBack"  :videoInfo="videoInfo"
					@formChildMsg='formChildData'>
				</component>
		</van-popup>
    <transition name="SummaryActionSheetBox">
         <myPopup v-if="showSummary" :meetingMsg="meetingMsg" :popupType="popupType" @formChildMsg='formChildData' :videoInfo="videoInfo" ></myPopup>
    </transition>
    
    <BuyRisk v-if="isBuyRisk" :buyRiskObj ="buyRiskObj" :shoppingLinkInfo="shoppingLinkInfo" @formChildMsg="formChildData"></BuyRisk>
    <!-- 第三方外链返回按钮 -->
    <BackHomePage v-if="isJump" :toJump="toJump" />
  </div>
</template>

<script>
  import wxApi from '../../../../util/wxApi';
  import socket from '../../../../util/Socket';
  import fun from "../../../../util/function";
  import VideoCom from '@/components/videoCom.vue'; //视频播放
  import backMixin from "@/mixins/backMixin.js"
  import liveBackMixin from "@/mixins/liveBackMixin.js"
  import FooterCom from './footerCom.vue'; //视频播放
  import InviteBoxCom from '@/pages/liveRoomPages/components/inviteBoxCom.vue'; //邀请榜按钮
  import OrderList from '@/components/actionSheet/orderList.vue'; //商品列表
  import MessageCom from '@/pages/liveBackPages/components/psLookBackCom/newMessageCom.vue'; //留言组件
  //import MessageCom1 from './messageCom.vue'
  import InteractionRightLookBackCom from '../../interactionRightLookBackCom.vue'; //右侧互动组件
  import InvitationCard from '@/pages/invitationCard/newInvitationCard.vue'; //邀请卡组件
  import LiveInvitationList from "@/components/actionSheet/liveInvitationList"; //邀请榜
  import ZxyhLiveInvitationList from "@/components/actionSheet/zxyhLiveInvitationList.vue"//中信银行邀请榜
  import ZxjtLiveInvitationList from "@/components/actionSheet/zxjtLiveInvitationList.vue"//中信银行邀请榜
  import PlayProgress from './playProgress.vue'; //播放进度
  import ShowMask from '@/components/actionSheet/showMask' //透明蒙层 点击可关闭操作面板
  import GlobalMask from '@/components/globalMask'; //全局背景层组件
  import {
    activityArrayLoc
  } from '@/store/dataList.js'; //模拟假数据
  import FooterPop from '@/components/activeCom/footerPop';
  import ActiveRightTop from '@/components/activeCom/activeRightTop';
  import ActiveLeftBottom from '@/components/activeCom/activeLeftBottom';
  import ActiveLeftTop from '@/components/activeCom/activeLeftTop';
  import ApplyInfo from '@/components/applyInfo'//报名 中奖信息组件
  import ReportPop from '@/components/reportPop' //举报
  import CourseListPop  from  '@/components/zxjtqh/CourseListPop.vue'
  import ZanAnimation from '@/components/zanAnimation.vue';
  import CourseVideoCover from '@/components/zxjtqh/CourseVideoCover.vue'; // 未购买课程视频cover
  import { shoppingInfo,getIsAttentionFun, followSpecialColumn, cancelFollowSpecialColumn, getFollowState } from '@/util/api.js'
  import BackHomePage from '@/components/backHomePage' //三方外链返回首页按钮
  import meetingSummaryCom from '@/pages/liveRoomPages/components/meetingSummaryCom'//会议纪要弹出框
	import meetingMaterialCom from '@/pages/liveRoomPages/components/meetingMaterialCom'//会议材料弹出框
	import cleckMaterialCom from '@/pages/liveRoomPages/components/cleckMaterialCom'//查看会议材料弹出框
	import downloadMaterialCom from '@/pages/liveRoomPages/components/downloadMaterialCom'//下载会议材料弹出框
  import myPopup from './myPopup.vue';
  import dayjs from 'dayjs';
  //import WxOpenApp from '@/components/zxjt/wxOpenApp';
  export default {
    mixins: [wxApi, socket,backMixin,liveBackMixin],
    props: {
      videoInfo: Object,
      courseInfo: Object || null,
    },
    components: {
      VideoCom,
      FooterCom,
      OrderList, //订单组件
      MessageCom, //留言组件
      //MessageCom1,
      InteractionRightLookBackCom, //右侧互动组件
      InvitationCard, //邀请卡组件
      LiveInvitationList, //邀请榜组件
      ZxyhLiveInvitationList,//中信银行邀请榜
      ZxjtLiveInvitationList,//中信建投邀请榜
      PlayProgress, //播放进度 组件
      ShowMask, //透明蒙层
      InviteBoxCom, //邀请榜按钮
      GlobalMask, //全局背景层组件
      FooterPop, //底部弹出层组件
      ActiveRightTop, //右上角活动
      ActiveLeftBottom, //左下角活动
      ActiveLeftTop, //左上角活动
      ApplyInfo,//中奖信息组件
      ReportPop,//举报
      ZanAnimation,//赞 上方效果
      CourseVideoCover,//赞 上方效果
      CourseListPop,
      BackHomePage,//三方外链返回首页按钮
      meetingSummaryCom,//会议纪要弹出框
			meetingMaterialCom,//会议材料弹出框
			cleckMaterialCom,//查看会议材料弹出框
      downloadMaterialCom,//下载会议材料弹出框
      myPopup
      //WxOpenApp,
    },
    data() {
      return {
        quickMessageList:[], // 快捷消息列表
        quickMessage:"",//点击选中的快捷消息
        videoId: this.$route.params.id,
        videoCoverBox: true, //封面图
        isPlayBtn: false, //播放按钮显示不显示
        loadCompleted: false, //图片加载完毕
        isShoppingBtn: false,
        shoppingNum: '',
        isFooterCom: 'null', //弹出框组件
        totalNum: '', //留言数
        isInvitationCard: false, //展示邀请卡组件
        fromCom: 'vLookBack',
        progressShow: false, //播放进度展示
        playBtnShow: false,
        progress: 0, // 进度条
        progressL: 0, // 拖动进度条的长度
        imgLoading: true,
        videoLoading: true,
        bgImagUrl: '', //直播大背景图
        videoCoverBoxClass: '',
       // isVideoDom: false, //视频dom  show
        getPlatform: fun.getPlatform(), //app wx
        isZyzqApp: window.isZyzqApp,
        inviteTitle: '', //邀请榜组件标题
        showInviteBtn: false, //邀请榜按钮
        isActivity: [false, false, false, false], //活动位置显示数组
        activityArray: [], //活动数组
        activeDataArray: [], //单个活动数组
        activeTitle: '', //活动标题
        frontTopImg: '', //头部前景图
        frontBottomImg: '', //底部前景图
        isFrontImg: false, //前景图显示
        isToggle: false,
        lookBackInterval:'',
        timerNum:0,
        timerNumSwitch:true,
        isApplyInfo:false, //报名中奖信息填写是否展示
        banner: [],
        txBase: '', //用户头像
        postImg: '', //封面图
        liveTime: '', //预告时间
        clockImg: require('@/assets/images/invite/clock.png'), //时间icon
        mengCengApp: require("@/assets/images/inviteApp/mengceng.png"), //蒙层
        mengCeng: require("@/assets/images/invite/mengCeng.png"), //蒙层
        wBg: require('@/assets/images/invite/s_white.png'), //白底
        reduceVal: 1200,
        canvasImg:'',
        sassRoomBg:require('../../../../assets/images/room_bg.png'),//sass默认房间背景
        vantPopupShow: false,
        isPopupCom: '', //弹出框
        popupObj: {
          'position': '',
          'width': '',
          'height': '',
          'isOverlay': true,
          'round':false,//圆角
          'isPopupGlobalMask':true,//蒙层是否点击消失
        },
        isCourseCoverImg:false,//付费课程覆盖层
        isCourseBtn:false,
        isBuyRisk:false,//是否打开购物车购买风险弹窗
        shoppingLinkInfo:{},//购物车当前点击商品信息
        shoppingDataInfo: {}, //商品信息
        buyRiskObj:{},
        isJump: false, // 是否为第三方外链进入
        toJump: '', // 从那个机构跳转过来
        isAttention:false,
        isInvitaCard: false,
        meetingMsg: {},//给会议材料组件的数据
        marginTopClass: '',
        showSummary: false,//会议纪要弹框容器
        popupType:'',
        isShowClose:true,
      }
    },
    watch: {
      uinfo(curVal, oldVal) {
        if (curVal.un != undefined && curVal.un.length > 0) {
          this.un = curVal.un;
          this.nickname = curVal.nickname;
          this.wxpic = curVal.wxpic;
          this.getCardER(); //邀请里面二维码
          this.invitationCardFun(this.wxpic);
        }
      },
      inputValue() {
        if (this.inputValue) {
          this.zxyhSend = "zxyh-send"
        } else {
          this.zxyhSend = "zxyh-send-gray"
        }
      },
      isLoadIcon(val, oldVal) {},
      riskTipEd: { // 中银证券 检查是否签约
        immediate: true,
        handler(val, oldVal) {
          if (this.$channel == 'zyzq' && !val) {
            fun.getRoomSignUp(0, this.videoId) //签约类提示
          };
        },
      },
      closeLoading: {
        handler(e) {
          // if (!e.videoLoading && !e.isPlayBtn && this.loadCompleted) {
          //   if(!this.$refs.videoCom.$refs.videoref.getAttribute('controls')){ //中信银行 模式2隐藏自己写进度条
          //      this.progressShow = true;
          //   }
          //   this.videoCoverBox = false;
          // }
        },
        deep: true
      },
    },
    computed: {
      uinfo() {
        return this.$store.state.userInfo;
      },
      riskTipEd() {
        return this.$store.state.setRiskTip;
      },
      isLoadIcon() {
        if (this.$store.state.SysOrgInfo.icon) {
          this.wxRegister(this.wxRegCallback);
          return true
        } else {
          return false
        }
      },
      sysInfo() {
        return this.$store.state.SysOrgInfo;
      },
      closeLoading() {
        return {
          isPlayBtn: this.isPlayBtn,
          videoLoading: this.videoLoading
        }
      },
      showMask() { //送作面板外层透明蒙版 显示
        return this.$store.state.showMask
      },
      isGlobalMask() { //操作面板外层透明蒙版 显示
        return this.$store.state.globalMask.isShow
      },
      gsTipShow() { //国盛风险提示开关
        return this.$store.state.showGsTip;
      },
      isComputedFloatVideoBtn(){
        return  this.$store.state.videoIsPlay && this.$store.state.appVersionBoolean && window.terminal.isZxjtApp
      },
      isTencentLive() {
        return this.videoInfo.videoInfo.partnerType == 12
      },
      haveSummary() {
        return this.videoInfo.videoInfo?.roomVideoExt2?.tcSummaryList && this.isTencentLive
        },
      haveMaterial() {
        return this.videoInfo.videoInfo?.roomVideoExt2?.documentInfoList && this.isTencentLive
      }
    },
   async  created() {
      this.getcheckAttention();
      const {videoInfo:{courseId,invite,diyImgUrl}} = this.videoInfo;
      const source = sessionStorage.getItem('source');
      const plat = await fun.initSourcePlat();
			if(source === 'hly_mini' && plat === 'mini'){
          this.isShowClose = false;
			}  
      //invite  邀请卡1邀  2邀请有礼 3自定义 竖版只有邀
      if (invite == '1') {
        if (this.$channel == 'zxjt') {//建投app显示
          if (window.terminal.isZxjtApp) {
            this.isInvitaCard = true;
          }
        } else {
          this.isInvitaCard = true;
        }	      
      } else if (invite == '2') {
        this.isYqyl = true
      } else if (invite == '3') {
        this.isInviteSwicth = true;
        this.inviteImg = diyImgUrl
      } else { //默认为false

      }
      const  { appVersionBoolean } =  this.$store.state;
			if(appVersionBoolean && window.terminal.isZxjtApp){//竖屏&& 版本大于 8.2.2
				this.$store.commit('setShowMarginTop',false);//设置头部 
        this.marginTopClass = 'margin-top-100px'
			}		
    if(this.courseInfo){
       //priceType  0-免费，1-付费  haveBuy true 购买 false 未购买
      const { priceType, haveBuy ,shelveType} = this.courseInfo;
      if((courseId  && !haveBuy)|| shelveType == 2) {
          this.isCourseCoverImg = true
      }
      if(courseId){
          this.isCourseBtn = true
      }
    }
		if (window.terminal.isZxjtApp) {
			this.banner = [{
					url: require('@/assets/images/inviteApp/1.png'),
					title: "蓝色简约"
				},
				{
					url: require('@/assets/images/inviteApp/2.png'),
					title: "限时抢购"
				},
				{
					url: require('@/assets/images/inviteApp/3.png'),
					title: "看直播赢好礼"
				},
				{
					url: require('@/assets/images/inviteApp/4.png'),
					title: "标准版"
				},
        {
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
				},	
			]
		} else {
			this.banner = [{
					url: require('@/assets/images/invite/1.png'),
					title: "蓝色简约"
				},
				{
					url: require('@/assets/images/invite/2.png'),
					title: "限时抢购"
				},
				{
					url: require('@/assets/images/invite/3.png'),
					title: "看直播赢好礼"
				},
				{
					url: require('@/assets/images/invite/4.png'),
					title: "标准版"
				},
        {
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},	
			]
		}
		//浮窗direction
		 let channelArr = ['zxjt'];
		 if (channelArr.includes(this.$channel)){
		 	let modeArr = [0, 2];
		 	let {
		 		mode
		 	} = this.videoInfo.videoInfo; //0 横屏   其他竖屏
		 	if (mode == null) {
		 		mode = '0'
		 	}
		 	let direction = modeArr.includes(mode) ? '0' : '1';
			this.$store.dispatch('setFloatVideoDirection',direction);
		 }

      if (this.videoInfo.hasOwnProperty('tables')) {
        let arrTables = [];
        arrTables.push(...this.videoInfo.tables)
        let tabData = arrTables
        if (tabData.find(i => i.type == 4)) {
          if(this.$channel !== 'zxjt'){//zxjt 去除邀请榜单功能(横屏不动)
            this.showInviteBtn = true //显示分享榜 按钮
            this.inviteTitle = tabData[tabData.findIndex(m => m.type == 4)].title
          }         
        }
      }
      if (this.videoInfo.videoInfo.mode === 2) { //竖屏模式2  封面图 上移 和视频保持统一
        this.videoCoverBoxClass = 'video-cover-box-second-mode';
      } else {
        this.videoCoverBoxClass = 'video-cover-box';
      }
      //存直播间url
      let backVideoUrl = window.location.href
      this.$lockr.set("PlayBackVideoUrl", backVideoUrl)
      fun.dotNum('lookBack_particulars_page'); //打点

      this.getShoppingData(); //一键下单
      //this.getMessageData(); //留言数据
      this.addLookBackRecord(); //添加观看记录
	  const {videoInfo:{video}} = this.videoInfo;
	  if(video){
		   this.$store.dispatch("videoSrc", video);
	  }    
      //设置邀请卡里面的二维码没有确认un是否有值  不计数
      //let shareUrl = "liveBack/" + this.$route.params.id + "?fromUn=" + this.$store.state.userInfo.un;
	  if (this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
	  	this.un = this.$store.state.userInfo.un;
	  	this.nickname = this.$store.state.userInfo.nickname;
	  	this.wxpic = this.$store.state.userInfo.wxpic;
	  	this.getCardER(); //邀请里面二维码
	  	this.invitationCardFun(this.wxpic);
	  }
      //活动
      fun.getActivityData(2, this.videoId, (res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          if (res.data.data[i].length != 0) {
            this.$set(this.isActivity, i, true);
          }
        }
        this.activityArray = res.data.data;
      });
      // 是否为三方外链跳转
      if(!!window.sessionStorage.getItem('isJump')){
        this.isJump = !!window.sessionStorage.getItem('isJump')
        this.toJump = window.sessionStorage.getItem('toJump')
      }
    },
    mounted() {
      this.getQuickMessage(); //获取直播快捷栏消息；
      this.bgImagUrl = this.videoInfo.videoInfo.bgImagUrl //直播大背景图
      if(!this.bgImagUrl){
       this.bgImagUrl = this.sassRoomBg //直播大背景图
      }
      this.initWebSocket('/liveSocket/backVideo?token=' + this.$token + '&plat=' + fun.getPlatform() + '&vid=' + this
        .videoId + '&channel=' + this.$channel + '&source=' + this.$source);
      // 判断预览图片是否加载完毕
      if (this.videoInfo.videoInfo.preImagUrl && this.videoInfo.videoInfo.preImagUrl != '') {
        var newImg = new Image();
        newImg.src = this.videoInfo.videoInfo.preImagUrl + '?x-oss-process=image/resize,m_fixed,h_424,w_750';
        newImg.onerror = () => {
          console.log("图片加载失败")
        }
        newImg.onload = () => {
          this.isPlayBtn = true;
          this.imgLoading = false;
          this.loadCompleted = true;
        }
      }
      //弹框加定位 正中间
      let toastEle = document.getElementsByClassName('my-toast-ps')[0]
      if(toastEle){
         toastEle.style.top ='50%'
       }
    },
    methods: {
      clickHeader(clickType) {
        const {videoInfo:  {title , creator} } = this.videoInfo;
				switch (clickType) {
					case 'attention': // 点击关注
						if (this.$store.state.isYk) { //游客
						   fun.ykDisposeFun();
						   return
						}
            // 是否来自直播小站
            this.$route.query.liveStation === '1' ? this.liveStationAttention() : this.isAttention = fun.LiveAttentionFun(this.isAttention, this.videoInfo.videoInfo.creator);
						break;
          case 'floatVideo':
              $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
                page_name: `回看详情页`,
                user_nickname: this.$store.state.userInfo.nickname,
                live_room_id: this.$route.params.id,
                live_room_name: title,
                live_room_status: '回看',
                live_room_creator: creator,
                function_name: '唤起悬浮窗',
              });
              fun.floatSendData({}, '0')
						break;
          case 'inviteBtn':
               $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
                page_name: `回看详情页`,
                user_nickname: this.$store.state.userInfo.nickname,
                live_room_id: this.$route.params.id,
                live_room_name: title,
                live_room_status: '回看',
                live_room_creator: creator,
                function_name: '邀请',
              });
            this.clickInviteBtn();
						break;
					default:
						break;
				}
			},
    clickInviteBtn() {
      //打点
      const { id } = this.$route.params;
      const {videoInfo:  {title , creator} } = this.videoInfo;
      fun.shareDotNumFun({ ...this.videoInfo.videoInfo, fromTypeLiveBack: 'back', vid: id });
      // 神策打点（邀请）
      $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
        page_name: `回看详情页`,
        user_nickname: this.$store.state.userInfo.nickname,
        live_room_id: this.$route.params.id,
        live_room_name: title,
        live_room_status: '回看',
        live_room_creator: creator,
        function_name: '邀请',
      });
      if (this.$store.state.isYk) {//游客
        let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
        fun.ykDisposeFun(jointUrl)
      } else { //非游客
        if (window.terminal.isZxjtApp) {
          this.getInviteBgList();
        } else if (window.terminal.isZxjtqhApp) {//建投期货app   
          let { shareTitle, shareSubtitle, shareImgurl, } = this.videoInfo.videoInfo
          fun.zxjtqhShare('liveRoom', "22,23,24,1", shareTitle, fun.getCurPageUrl('back', this.videoId), shareSubtitle, shareImgurl)
        } else {
          this.isInvitationCard = true;
        }
      }
    },
      async liveStationAttention(){
        const { videoInfo: { creator } } = this.videoInfo;
        if (this.isAttention) {
          try {
            const res = await cancelFollowSpecialColumn(creator, 6)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.isAttention = false;
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        } else {
          try {
            const res = await followSpecialColumn(creator, 6);
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.isAttention = true;
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        }
      },
       // 倍速修改
    changeSpeedOut(speed) {
      this.$refs.videoCom.player.setSpeed(speed)
    },
      clickVanOverlay(){
        if(this.isPopupCom == 'SmsVer'){

        }else{
          this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
        } 
      },
      // 打开课程列表popup
      openPopup() {
        this.popupObj = {
							'position': 'bottom',
							'width': this.$store.state.isMobile? '100%' : '400px',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
							},
        this.isPopupCom = 'CourseListPop'
        this.vantPopupShow = true;
      },
      getCardER(){
        let url = fun.getCurPageUrl("back", this.videoId);
        this.$lockr.set("ERcode", url);
      },
      invitationCardFun(txImg) {
        if (!this.$store.state.isYk) { //非游客
          if (txImg == null || txImg.includes('gd_mr')) { //游客容错
            this.txBase = require('@/assets/images/gd_mr.png')
          } else {
            this.getImgBase64(txImg, 'tx');
          };

          let {
            videoInfo: {
              imagUrl
            }
          } = this.videoInfo;
          //封面图 img
          this.getImgBase64(imagUrl, 'back');
        }
      },
      // 本地将url转成base64格式
      getImgBase64(url, source) {
        window.fun.getBase64(url, source,(res) =>{
          if (source === "back") {
            this.postImg = res; // 将结果赋值给需要用的变量属性
          }  else {
            this.txBase = res;
          }
        })
      },
      // 快捷消息点击事件
      clickmessage(item){
         if (this.$store.state.isYk && window.terminal.isZxjtqhApp) {
                //游客
                  fun.ykDisposeFun();
                  return;
              } 
        this.quickMessage = item;
      },
      getQuickMessage(){
        this.$http.get("/h5live/fastReply",).then(res=>{
          if(res.data.code == "000000"){
            this.quickMessageList = res.data.data;
          }
        }).catch(response => {
      	  console.log(response);
      	});
      },
      setIntervalLookBack() {
        this.lookBackInterval = setInterval(this.setInterFun, 3000);
      },
      setInterFun: function() {
        this.timerNum += 3
        if(this.timerNum > 60 && this.timerNumSwitch){
            this.timerNumSwitch = false;
            if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') { //  isUc 已经判断民生 微信    通行证
              fun.msySkipSinePage('back', this.$route.params.id, this.videoInfo.source) //调用微信 民生银行通行证
              return
            }
        }
      },
      reportBtn() {
        this.$store.dispatch("globalMask", {isShow: true,bgColor: ''});
        this.isFooterCom = 'ReportPop'
        this.isToggle = false;
      },
      clickHeadImg() {
        this.isToggle = !this.isToggle;
      },
      setFrontImg() {
        // frontImgType 前景图类型 0 无 1经典蓝 2中国红 3活力橙 4神秘紫 5松柏绿 99自定义 frontImg: 顶部前景  frontImgBottom: 底部前景
        //前景图处理
        switch (this.videoInfo.videoInfo.frontImgType) {
          case 0: //无
            break;
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
            this.isFrontImg = true;
            this.frontTopImg = require('@/assets/images/front-img/front' + this.videoInfo.videoInfo.frontImgType +
              '.png');
            this.frontBottomImg = require('@/assets/images/front-img/front' + this.videoInfo.videoInfo.frontImgType +
              this.videoInfo.videoInfo.frontImgType + '.png');
            break;
          case 99: //自定义
            this.isFrontImg = true;
            this.frontTopImg = this.videoInfo.videoInfo.frontImg;
            this.frontBottomImg = this.videoInfo.videoInfo.frontImgBottom;
            break;
          default:
            break;
        }
      },
      clickActivity(position) { //点击活动  position参数是点击的活动位置  //位置 0左上 1左下 2右上 3右下
        //左下角活动一个直接跳转  多个弹出
        if (position == 'leftBottom') {
          this.activeDataArray = this.activityArray[1];
          fun.activityDotNumFun(0, this.activityArray[1][0].id);
          window.sessionStorage.setItem('activityIconInfo', JSON.stringify(this.activityArray[1][0]))
          this.activeTitle = this.activityArray[1][0].name;
          this.$store.dispatch("globalMask", {
            isShow: true,
            bgColor: ''
          });
          this.isFooterCom = 'footerPop'
        } else if (position == 'rightTop') {
          this.activeDataArray = this.activityArray[2];
          fun.activityDotNumFun(0, this.activityArray[2][0].id);
          window.sessionStorage.setItem('activityIconInfo', JSON.stringify(this.activityArray[2][0]))
          this.activeTitle = this.activityArray[2][0].name;
          this.$store.dispatch("globalMask", {
            isShow: true,
            bgColor: ''
          });
          this.isFooterCom = 'footerPop'
        }
      },
      openFooterSheet(panelOptions) { //打开底部面板
        switch (panelOptions) {
          case 'invite': //邀请卡面板
            this.$store.dispatch("globalMask", {isShow: true,bgColor: ''});
            this.isFooterCom =this.$channel=='zxyh'? 'ZxyhLiveInvitationList' :this.$channel=='zxjt'? 'ZxjtLiveInvitationList': 'LiveInvitationList'
            break;
          default:
            break;
        }
      },
      addLookBackRecord() { //添加观看记录
        if (this.$store.state.isYk) {
          return
        }
        this.$http.post("/h5live/addViewRecord?vid=" + this.videoId).then(
          res => {
            if (res.data.code != "000000") {
              console.log("观看记录接口返回失败")
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      wxRegCallback() {
        const {shareTitle:orgShareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
        const { videoInfo: { shareTitle, shareSubtitle, shareImgurl ,subTitle,title} } = this.videoInfo;
        const { SysOrgInfo: { icon, name } } = this.$store.state;       
        let opstion = {
          link: fun.getCurPageUrl('back', this.videoId),
          title: shareTitle || title || orgShareTitle || '【' + name + '】精彩视频', //分享标题
          desc: shareSubtitle|| subTitle || shareDesc || "精彩视频，尽在" + name + "手机直播！" , //分享描述
          imgUrl: shareImgurl || shareIcon || icon, //分享的图片 
          success: ()=> {
            fun.shareDotNumFun({...this.videoInfo.videoInfo,fromTypeLiveBack:'back',vid:this.videoId});//打点
          },
          error: (e)=> {
            fun.shareDotNumFun({...this.videoInfo.videoInfo,fromTypeLiveBack:'back',vid:this.videoId});//打点
          }
        };
        this.ShareTimeline(opstion);
      },
      getMessageData() {
        this.$http.get("/h5live/getComment?vid=" + this.videoId + "&page=1")
          .then(
            res => {
              if (res.data.code == "000000") {
                this.totalNum = res.data.data.totalNum;
              }
            },
            err => {
              console.log(err);
            }
          );
      },
      sheetBeforeEnter(el, done) { //底部面板 弹出之前
        Velocity(
          el, {
            translateY: '100%',
          }, {
            duration: 0,
            easing: "ease-out",
            complete: done
          }
        )

      },
      sheetEnter(el, done) { //底部面板 弹出时
        Velocity(
          el, {
            translateY: '0%'
          }, {
            duration: 500,
            easing: "ease-out",
            complete: done
          }
        )
      },
      sheetAfterEnter(el, done) { //弹出之后
      },
      sheetBeforeLeave(el, done) { //弹入之前
        Velocity(
          el, {
            translateY: '100%'
          }, {
            duration: 800,
            complete: done
          }
        )
      },
      sheetLeave(el, done) {},
      formChildData(data) {
        //console.log(data)
        const { title, creator } = this.videoInfo.videoInfo;
        switch (data.type) {
          case 'closeSmsVer'://关闭短信验证弹框
            this.vantPopupShow = false;
            break;
           case 'closeReportPop'://关闭举报
              this.$store.dispatch("globalMask", {isShow: false,bgColor: ''});
              this.isFooterCom = ''
             break;
          case 'applyInfo': //报名中奖信息
               this.isApplyInfo = true
           break;
           case 'closeApplyInfo': //报名中奖信息
               this.isApplyInfo = false
           break;
          case 'activityChildArray': //单个活动数据
            this.activeDataArray = data.data;
            this.activeTitle = data.data.name;
            this.$store.dispatch("globalMask", {
              isShow: true,
              bgColor: ''
            });
            this.isFooterCom = 'FooterPop';
            break;
          case 'closeAllPopup': //关闭弹出层以及全局背景层
          case 'footerActionSheetClose':
            //this.isInvitationCard = false;
            this.$store.dispatch("globalMask", {
              isShow: false,
              bgColor: ''
            });
            this.isFooterCom = ''
            break;
          case 'closeInvite': //关闭邀请卡组件
            //this.isInvitationCard = false;
            this.$store.dispatch("globalMask", {
              isShow: false,
              bgColor: ''
            });
            this.isFooterCom = ''
            break;
          case 'closeInvitation': //关闭邀请卡组件
            this.isInvitationCard = false;
            break;
          case 'messageSendSuccess': //socket 留言成功回调
            this.totalNum++; //留言组件监听数字改变更新列表
            break;
          case 'clickShoppingBtn': //一键下单
            this.getShoppingData('rightBtnFrom')
            break;
          case 'footerVantPopClose': //关闭一键下单
            this.vantPopupShow = false;
              setTimeout(() => {
                this.isPopupCom = null
              }, 300)
            break;
          // case 'clickMessageBtn': //点击留言按钮
          //   this.isFooterCom = MessageCom1
          //   this.$store.dispatch("showMask", true); //打开遮罩层
          //   break;
          case 'footerMsaageBoxClose': //点击留言按钮
            this.isFooterCom = null;
            this.$store.dispatch("showMask", false); //关闭遮罩层
            break;
          case 'upDataTotalNum': //留言之后更新totalNum
            this.totalNum = this.totalNum == data.data ? this.totalNum : data.data;
            break;
          case 'closeAll': //关闭操作面板 留言
            this.isFooterCom = null;
            this.$store.dispatch("showMask", false); //关闭遮罩层
            break;
          case 'reportMsgData': //举报留言
						this.reportMsgObj = data.data;
						this.popupObj = {
							'position': 'bottom',
							'width': '100vw',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
							},
						this.isPopupCom = 'reportMsgCom'
						this.vantPopupShow = true;
						break;
					case 'closeVantPopup': //关闭vant弹出框组件
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
						break;
          case 'openBuyRisk': //打开购物车购买风险弹窗
            this.buyRiskObj = data.data.buyRiskObj
            this.shoppingLinkInfo = data.data.shoppingLinkInfo
            this.isBuyRisk = true;
            break;
          case 'closeBuyRisk': //购物车购买风险弹窗 点击记录
            this.isBuyRisk = false;//关闭
            break;
          case 'cleckMaterial'://点击查看材料弹出窗口
            this.popupObj = {
              'position': 'bottom',
              'width': '100%',
              'height': 'auto',
              'isOverlay': true,
              'round': true,
              'isPopupGlobalMask': true,
            },
            this.isPopupCom = 'cleckMaterialCom';
            this.vantPopupShow = true;
            this.meetingMsg = data.dataMsg
            break;
          case 'downloadMaterial'://点击下载材料弹出窗口
            // this.popupObj = {
            //   'width': '85%',
            //   'height': '25%',
            //   'isOverlay': true,
            //   'round': true,
            //   'isPopupGlobalMask': true,
            // },
            // this.isPopupCom = 'downloadMaterialCom';
            // this.vantPopupShow = true;
            this.meetingMsg = data.dataMsg
            this.showSummary = true
            this.popupType = 'material'
            break;
          case "closePopup"://关闭会议纪要容器
            this.showSummary = false
            break
          case 'subscribeCourseSucess': //付费课程订阅成功
            this.isCourseCoverImg = false;
            this.$emit('sendFather', {type: 'subscribeCourseSucess',data: {}});
            break;
          default:
            break;
        }
      },
	  getInviteBgList() {
		  let {videoInfo:{roomId}} = this.videoInfo;
		  if(!roomId){//空
		     console.log('roomId为空选取标准版')
			 let canvasBox = document.getElementById('canvasBox')
			 let canvas = document.createElement('canvas')
			    canvas.width = 646;
			    canvas.height = 992;
			    canvasBox.appendChild(canvas);
			    this.drawImg('建投版邀请卡')
			    canvas.style.display = 'none';
		  }else{
				this.$http.get('/h5live/getShardingImg?roomId=' + roomId).then((res) => {
					let {
						code,
						data
					} = res.data
					if (code == '000000') {
						if(data.length && data.length == '1'){
							let canvasBox = document.getElementById('canvasBox')
							let canvas = document.createElement('canvas')
							   canvas.width = 646;
							   canvas.height = 992;
							   canvasBox.appendChild(canvas);
							   //this.drawImg('标准版11',data)
							   this.drawImg(data[0].title,data)
							   canvas.style.display = 'none';
						 }else{
						    console.log('app邀请卡接口返回错误')
						 }
					}
				}, (err) => {
					console.log(err);
				})
			}

	  },
	  //app 邀请卡//根据title 画图
	  drawImg(title,dataArray) {
	  	let erCode = this.$lockr.get("ERcode")
	  	this.imgBase64ERcode = jrQrcode.getQrBase64(erCode, {
	  		correctLevel: QRErrorCorrectLevel.L,
	  	}); //base64格式二维码
	  	return new Promise((resolve, reject) => {
	  		switch (title) {
	  			case '蓝色简约': //绘制第一张
	  				let c = document.getElementById("canvasBox");
	  				let ctx = c.getContext("2d");
	  				const bg = new Image();
	  				bg.src = this.banner[0].url;
	  				bg.onload = () => {
	  					c.width = 646*2;
	  					c.height = 992*2;
	  					ctx.drawImage(bg, 0, 0, 646*2, 992*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx, TXImg, 270*2, 134*2, 106);
	  						// ctx.drawImage(TXImg, c.width/2 - 51, 173, 104, 104); //起始   +大小
	  						ctx.fillStyle = "#FFFFFF"; //昵称
	  						ctx.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx.textAlign = "center";
	  						ctx.fillText(this.nickname, 323*2,290*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx.drawImage(ERImg, 397*2, 696*2, 172*2,172*2);
	  										fun.dealImage(c.toDataURL("image/png"),
	  											this.reduceVal, (res) => {
	  												//this.canvasImg = res
	  												this.postAppShare(res);
	  												c.style.display = 'none';
	  											})
	  									}
	  						}
	  					}
	  				}
	  				break;
	  			case '限时抢购': //绘制第二张
	  				let c1 = document.getElementById("canvasBox");
	  				let ctx1 = c1.getContext("2d");
	  				const bg1 = new Image();
	  				bg1.src = this.banner[1].url;
	  				bg1.onload = () => {
	  					c1.width = 646*2;
	  					c1.height = 996*2;
	  					ctx1.drawImage(bg1, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx1, TXImg, 273*2, 197*2, 99);
	  						// ctx1.drawImage(TXImg, c1.width/2 - 51, 230, 104, 104); //起始   +大小
	  						ctx1.fillStyle = "#FFFFFF"; //昵称
	  						ctx1.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx1.textAlign = "center";
	  						ctx1.fillText(this.nickname, 323*2,338*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx1.drawImage(SCImg, 75*2, 425*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx1.drawImage(ERImg,  397*2, 752*2, 172*2,172*2);
	  										fun.dealImage(c1.toDataURL(
	  												"image/png"), this
	  											.reduceVal, (
	  												res) => {
	  												//this.canvasImg = res
	  										        this.postAppShare(res);
	  												c1.style.display = 'none'
	  											})
	  									}
	  						}
	  					}
	  				}
	  				break;
	  			case '看直播赢好礼': // 绘制第三张
	  				let c2 = document.getElementById("canvasBox");
	  				let ctx2 = c2.getContext("2d");
	  				const bg2 = new Image();
	  				bg2.src = this.banner[2].url;
	  				bg2.onload = () => {
	  					c2.width = 646*2;
	  					c2.height = 996*2;
	  					ctx2.drawImage(bg2, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx2, TXImg, 82*2, 228*2, 99);
	  						// ctx2.drawImage(TXImg, 74, 324, 82, 82); //起始   +大小
	  						ctx2.fillStyle = "#FFFFFF"; //昵称
	  						ctx2.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx2.textAlign = "left";
	  						ctx2.fillText(this.nickname, 213*2, 260*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx2.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx2.drawImage(ERImg, 397*2, 695*2, 172*2,172*2);
	  										fun.dealImage(c2.toDataURL(
	  												"image/png"), this
	  											.reduceVal, (
	  												res) => {
	  											   //this.canvasImg = res
	  												this.postAppShare(res);
	  												c2.style.display = 'none';
	  											})

	  									}
	  						}
	  					}

	  				}
	  				break;
	  			case '标准版': // 绘制第四张
	  				let c3 = document.getElementById("canvasBox");
	  				let ctx3 = c3.getContext("2d");
	  				const bg3 = new Image();
	  				bg3.src = this.banner[3].url;
	  				bg3.onload = () => {
	  					c3.width = 646*2;
	  					c3.height = 996*2;
	  					ctx3.drawImage(bg3, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx3, TXImg, 58*2, 193*2, 116);
	  						// ctx3.drawImage(TXImg, 30, 134, 116, 116); //起始   +大小
	  						ctx3.fillStyle = "#000000"; //昵称
	  						ctx3.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx3.textAlign = "left";
	  						ctx3.fillText(this.nickname, 207*2, 233*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx3.drawImage(SCImg, 55*2, 352*2, 539*2, 305*2); //起始   +大小
	  								//绘制二维码
	  								const ERImg = new Image();
	  								ERImg.src = this.imgBase64ERcode;
	  								ERImg.onload = () => {
	  									ctx3.drawImage(ERImg, 422*2, 723*2, 172*2,172*2);
	  									fun.dealImage(c3.toDataURL("image/png"), this
	  										.reduceVal, (res) => {
	  											//this.canvasImg = res
	  											this.postAppShare(res);
	  											c3.style.display = 'none'
	  										})

	  								}
	  						}
	  					}
	  				}
	  				break;
          case '建投版邀请卡': // 绘制第五张`
						let c31 = document.getElementById("canvasBox");
							let ctx31 = c31.getContext("2d");
							const bg31 = new Image();
							bg31.src = this.banner[4].url;
							bg31.onload = () => {
								c31.width = 646*2;
								c31.height = 992*2;
								ctx31.drawImage(bg31, 0, 0, 646*2, 992*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										const {name,icon} = this.$store.state.SysOrgInfo || {};	
										const  curUrl = window.location.href;
										let shareTitleCur;
										let shareSubTitleCur;
										if(curUrl.includes('liveRoom')){//直播间  
											const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享						
											const {intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl} = this.roomInfo.roomInfo;
											shareTitleCur =  roomShareTitel || title || shareTitle ||` 【 ${name} 】一起来看直播吧！`  // 分享标题
											shareSubTitleCur =  roomShareSubtitl||  shareDesc ||  `精彩直播,尽在 ${name}手机直播！`  //分享描述
										}else{//回看
											const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
											const  { shareTitle, shareSubtitle, shareImgurl, subTitle, title }  = this.videoInfo.videoInfo;
											shareTitleCur = shareTitle || title || orgShareTitle || `【 ${name } 】精彩视频`; //分享标题
											shareSubTitleCur = shareSubtitle ||  shareDesc || `精彩视频,尽在${name}手机直播！`; //分享描述
										}
										fun.drawRoundRectTopRightLeft(ctx31,20*2,0,0,646*2, 365*2,SCImg)											
											//绘制title
											ctx31.fillStyle = "#000000";
											ctx31.font = "80px Arial";
											ctx31.fillText(shareTitleCur.length > 14 ? shareTitleCur.slice(0,14)+'...' : shareTitleCur, 30*2, 435*2);
											//绘制副标题
											ctx31.fillStyle = "#222630";
											ctx31.font = "52px Arial";
											//ctx31.fillText(shareSubTitleCur.length > 20 ? shareSubTitleCur.slice(0,18) +'...' : shareSubTitleCur, 30*2, 500*2);
											fun.textPrewrap(ctx31,shareSubTitleCur,30*2, 500*2,40*2,550*2,2);
												//绘制时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "80px Arial";
                        const { roomId ,beginTime ,crtTime} = this.videoInfo.videoInfo;
											  const time = dayjs(roomId ? beginTime : crtTime).format("MM月DD日 HH:mm");
												ctx31.fillText(time, 30*2, 675*2);
												//绘制开播时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "48px Arial";
												//ctx31.fillText(roomId?'开播时间':'上传时间', 42*2, 598*2);
                        ctx31.fillText('开播时间', 42*2, 598*2);
												//绘制圆角矩形
												ctx31.lineWidth = 2;//边框为14px
												ctx31.strokeStyle = '#ff5a00';
												ctx31.beginPath();
												ctx31.roundRect(30*2, 570*2, 120*2, 40*2, 20);//x,y width height  rad
												ctx31.stroke();			
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx31.drawImage(ERImg, 478*2, 816*2, 300, 300);
												fun.dealImage(c31.toDataURL("image/png"), this
													.reduceVal, (res) => {
														this.canvasImg = res
														//console.log(res);
														this.postAppShare(res);
														c31.style.display = 'none'
													})
			
											}
									}						
							}
            break;
            default: //自定义
	  			  let  c4 = document.getElementById("canvasBox");
	  			  c4.width = 646*2;
	  			  c4.height = 996*2;
	  			  let ctx4 = c4.getContext("2d");
	  			  let  bg4 = new Image();
	  			  fun.getBase64(dataArray[0].imgUrl, '', function(res) {
	  			  	bg4.src = res
	  			  });
	  			   bg4.onload = ()=>{
	  				 ctx4.drawImage(bg4, 0, 0, 646*2, 796*2);
	  				  const mengCeng = new Image();
	  				  mengCeng.src = this.mengCengApp;
	  				  mengCeng.onload = ()=>{
	  					  ctx4.drawImage(mengCeng, 0, 463*2, 646*2, 529*2); //起始   +大小
	  					  const TXImg1 = new Image();
	  					  TXImg1.src = this.txBase;
	  					  TXImg1.onload = () => {
	  					  	fun.circleImg(ctx4, TXImg1, 28*2, 828*2, 100);
	  					  	ctx4.fillStyle = "#000000"; //昵称
	  					  	ctx4.font ="normal small-caps 500 60px Microsoft Yahei In-Bold Font";
	  					  	ctx4.fillText(this.nickname, 148*2, 858*2);
	  					  		const ERImg = new Image();
	  					  		ERImg.src = this.imgBase64ERcode;
	  					  		ERImg.onload = () => {
	  					  			ctx4.drawImage(ERImg, 474*2, 807*2, 145*2,145*2);
	  					  			fun.dealImage(c4.toDataURL("image/png"), this.reduceVal, (res) => {
	  					  					//this.canvasImg = res;
	  										this.postAppShare(res);
	  										c4.style.display = 'none'
	  					  				})
	  					  		}
	  					  }
	  				  }
	  			   }
	  				break;
	  		}
	  	})
	  },
    postAppShare(base64Pic) {
      base64Pic = base64Pic.slice(23); //删除data:image/jpeg;base64,
      if (!base64Pic) return console.log('canvas 生成base64为空');
      let shareUrl = fun.getCurPageUrl('back', this.videoId);
      const {name} = this.$store.state.SysOrgInfo || {};	
			const {shareTitle:orgShareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
      let {videoInfo: { shareTitle,title, shareSubtitle ,subTitle}} = this.videoInfo;
      //分享
      let shareTitleLive = shareTitle || title || orgShareTitle || '【' + name + '】精彩视频';
      let summary = shareSubtitle || subTitle || shareDesc ||  "精彩视频，尽在" + name + "手机直播！";
      if (window.terminal.isZxjtAndroid) {
        KDS_Native.shareLive(shareTitleLive, shareUrl, summary, base64Pic)
      } else if (window.terminal.isZxjtIos) {
        let json = {
          "title": shareTitleLive,
          "shareUrl": shareUrl,
          "summary": summary,
          "base64Pic": base64Pic
        }
        window.webkit.messageHandlers.shareLive.postMessage(json)
      }
    },
      // 监听视频进度
      getProgress(val) {
        this.progress = val
      },
      //改变视频时间
      changeProgress(val) {
        this.progress = val
        const { player } = this.$refs.videoCom
				player.seek(player.getDuration() * (val / 100))
      },
      // 改变视频播放状态
      playStatus(val) {
        if (val === 1) {
          this.playBtnShow = false
        } else {
          this.playBtnShow = true
        }
      },
      playBtn() {
        this.playBegin();
      },
      playBegin() { //开始播放
        if(this.courseInfo){
          //priceType  0-免费，1-付费  haveBuy true 购买 false 未购买
          const { haveBuy  } = this.courseInfo;
          if(!haveBuy){
            fun.toastMessage('若需观看请前往中信建投期货金建投APP“精品课程”栏目订阅该课程');
            return 
          }
        }
        this.progressShow = true
        this.isVideoDom = true; //视频 dom显示
        this.isPlayBtn = false;
        this.setFrontImg();//前景图
        this.$store.commit("setVideoState","playVideo")
        // this.$refs.videoCom.playStart()
        // this.$refs.videoCom.playCurrentTime()
        // let VideoSetInterval = setInterval(() => {
        //   if (this.$store.state.duration === 0) {
        //     this.$refs.videoCom.palyDuration(); //获取视频总时长
        //   }
        //   this.$refs.videoCom.playCurrentTime() //获取视频当前播放进度
        // }, 1000);
        //离开本页面时清除定时器： 通过$once来监听定时器，在beforeDestroy钩子中可以被清除。
        // this.$once('hook:beforeDestroy', () => {
        //   clearInterval(VideoSetInterval);
        // })
        // this.progressShow = true
        // this.videoCoverBox = false;

      },
      getVideoLoading(val) {
        this.videoLoading = val
      },
      closeBtn() { //返回上一级页面
        fun.liveBackFun();
        return
        let _this = this;
        const str = _this.$route.meta.refer;
        setTimeout(function() {
          if (str && (str.includes("liveRoom")||str.includes("liveBack"))) { //说明上一个页面是直播间过来的 跳转到首页
            _this.$router.replace({
						path: `/${_this.$channel}/home`
					})
          } else {
            if(window.history.length <= 1){//判断路由是否没有上级 如果没有强制跳转到首页
              _this.$router.replace({
                path: `/${_this.$channel}/home`
              })
            }else{
              _this.$router.go(-1)              
            }
          }
        }, 216);
      },
      async getcheckAttention(){ // 查询是否关注
        const { videoInfo: { creator } } = this.videoInfo;
        const liveStation = this.$route.query.liveStation === '1'; // 是否来自直播小站
        if (liveStation) {
          try {
            const res = await getFollowState(creator, 6);
            this.isAttention = res.data.data;
          } catch (error) {
            throw new Error(error)
          }
        } else {
          const isattention = await getIsAttentionFun(creator);
          this.isAttention=isattention.data.data;
        }
      },
      //直播间商品列表和标题 一键下单
      async  getShoppingData(comeFrom) {
        try {
          // let plat = this.$store.state.axiosPlat;
					// if(!plat){
					// 	await fun.initAxiosPlatform()
					// }
          const msgData = await shoppingInfo(this.videoId, '1');
          const { code } = msgData.data;
          if (code === '000000') {
            const { data, data: { goods: { goodsList } } } = msgData.data;
            this.shoppingDataInfo = data;
            if (goodsList.length) {
              if (comeFrom === 'rightBtnFrom') {
                this.popupObj = {
                  'position': 'bottom',
                  'width': this.$store.state.isMobile ? '100%' : '400px',
                  'height': 'auto',
                  'isOverlay': true,
                  'round': true,
                  'isPopupGlobalMask': true,
                },
                this.isPopupCom = 'OrderList';
                this.vantPopupShow = true;
              }
            }
          }

        } catch (error) {
          console.log(error);
        }
        return 
        this.$http.get('/h5live/getRoomGoodsAndTitle?mixId=' + this.videoId + '&type=1').then((
          res) => { //mixId 房间id或回看id   type 0-直播间,1-回看
          var ua = navigator.userAgent.toLowerCase();
          if (res.data.code == '000000') {
            //console.log(res.data.data.title)
            if (res.data.data.goods.length) {
              if ((/MicroMessenger/i).test(ua)) { //微信
                let num = 0;
                for (let i = 0; i < res.data.data.goods.length; i++) {
                  if (res.data.data.goods[i].goodsTarget == "1") { // 0 app  1 微信
                    num++;
                    this.shoppingDataInfo.shoppingArray.push(res.data.data.goods[i])
                  }
                }
                if (num) {
                  this.isShoppingBtn = true;
                  this.shoppingNum = num;
                  this.shoppingDataInfo.num = num;
                } else {
                  this.isShoppingBtn = false;
                }
              } else { //app
                let num = 0;
                for (let i = 0; i < res.data.data.goods.length; i++) {
                  if (res.data.data.goods[i].goodsTarget == "0") { // 0 app  1 微信
                    num++;
                    this.shoppingDataInfo.shoppingArray.push(res.data.data.goods[i])
                  }
                }
                if (num) {
                  this.isShoppingBtn = true;
                  this.shoppingNum = num;
                  this.shoppingDataInfo.num = num;
                } else {
                  this.isShoppingBtn = false;
                }
              }
            } else {
              this.isShoppingBtn = false;
            }
          }
        }, (err) => {

        })
      },
      clickSummary() {//点击会议纪要弹出窗口
        this.showSummary = true
        this.popupType = 'summary'
      },
      clickMaterial() {//点击会议材料弹出窗口
        this.$store.dispatch("globalMask", {
          isShow: true,
          bgColor: ''
        });
        this.isFooterCom = 'meetingMaterialCom'
      }
    },
    destroyed() { //销毁
       clearInterval(this.lookBackInterval);
       //弹框回到70%位置
      let myToastEle = document.getElementsByClassName('my-toast-ps')[0]
      if(myToastEle){
         myToastEle.style.top ='70%'
       }
       const  { appVersionBoolean } =  this.$store.state;
        if(appVersionBoolean && window.terminal.isZxjtApp){//竖屏&& 版本大于 8.2.2
          this.$store.commit('setShowMarginTop',true);//设置头部 
        }	
    },
  }
</script>
<style>
.van-toast.my-toast-ps{
    top: 50%;
  }
</style>
<style lang="less" scoped="scoped">
  @import "../../../../assets/css/variable.less"; // less变量
  .report-img {
    width: 32px !important;
    height: 32px !important;
  }

  .black-zxyh {
    width: 100vw;
    height: 500px;
    background: rgba(0, 0, 0, 0.4);
  }

  .inner-input {
    width: 556px;
    height: 179px;
    background: #F4F4F4;
    border-radius: 21px;
    padding: 20px;
    font-size: 28px;
    /*font-weight: 500;*/
    color: #949494;

  }

  .ps-box {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    overflow: hidden;
     .course_video_cover_wrap {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
    }
    .header-content{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        // background: darkgrey;
        .wrap-content{
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          &.margin-top-100px{
            margin-top: 100px;
          }
          .wrap-right-box {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-start;
          .header-right-box {
              display: flex;
              margin-bottom: 20px;
              >div{
                width: 60px;
                height: 60px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                // filter: drop-shadow(2px 3px 3px gray) invert(2%);
              }
              .float-video{
                background: url("../../../../assets/images/zxjt/float-video.png") no-repeat center center;
                background-size: 38px;
              }
              .invite-btn{
                background: url(../../../../assets/images/zxjt/share-zxjt.png) no-repeat center center;
                background-size: 38px;
              }
              .close {
                background: url("../../../../assets/images/zxjt/header-close.png") no-repeat center center;
                background-size: 38px;
              }
            }

        }
        .headline-box {
          height: 60px;
          padding-right: 24px;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20px; 
          img {
              width: 60px;
              height: 60px;
              border-radius: 50%;
            }

            .middle-box {
              width: fit-content;
              font-size: 22px;
              color: white;
              display: flex;
              align-self: center;
              justify-content: center;
              flex-direction: column;
              margin-left: 16px;
              margin-right: 30px;
              .live-name {
                flex: 1;
                height: 30px;
                line-height: 30px;
                max-width: 220px;
                margin-bottom: 3px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

            .view-num {
              /* height: 30px; */
              font-size: 18px;
              /* line-height: 30px; */
            }
            }
        }
        }

    }
  }
  .video-cover-box-second-mode {
    width: 100vw;
    height: 100vh;
    /*display: block;*/
    position: absolute;
    bottom: 175px;
    left: 0;
    z-index: 3;
  }

  .cover-video-img {
    height: 100%;
    width: 100%;
    display: block;
    /*object-fit: cover;*/
    object-fit: contain;
  }

  .video-cover-box {
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  .video-cover-box .cover-video-img {
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  .loadingGif {
    width: 300px;
    height: 300px;
    position: absolute;
    background: url(../../../../assets/images/loadingImg.gif) no-repeat;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 11;
  }

  .play-btn {
    width: 120px;
    height: 120px;
    background: url(../../../../assets/images/play-img.svg) no-repeat;
    background-size: 120px 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    z-index: 9;
  }
  .live-theme {
    width: 550px;
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 48px;
    position: absolute;
    top: 18px;
    left: 30px;
    z-index: 10;
    /*		background: darkolivegreen;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }



  .message-box-ps {
    width: 490px;
    max-height: 360px;
    position: absolute;
    bottom: 240px;
    left: 30px;
    z-index: 10;
    > .left_bottom_course_list {
      width: fit-content;
      height: 43px;
      padding: 9px 12px;
      margin-bottom: 10px;
      .flex_center();
      border-radius: 22px;
      background: rgba(0, 0, 0, 0.6);
      > i {
        width: 24px;
        height: 24px;
        background: url('../../../../assets/images/zxjtqh/course_tag.png') center/100% no-repeat;
      }
      > span {
        font-size: 22px;
        color: #fff;
        margin-left: 8px;
      }
    }

  }

  .message-box-li {
    /*background: saddlebrown;*/
    /*		padding-top: 10px;*/
    /* line-height: 45px; */
  }

  .message-box-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .message-box-ul {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    width: 520px;
    max-height: 280px;
    overflow-y: scroll;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 0 15px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%);
  }

  .nick-name {
    color: #FFD800 !important;
  }

  .message-text {
  }

  .message-box-li {
    margin: 5px 0;
  }

  .message-box-li img {
    width: 45px;
    height: 45px;
    float: left;
    margin-right: 16px;
    border-radius: 50%;
    /* line-height: 90px; */
  }

  .message-box-li span {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    line-height: 46px;
    margin-top: 5px;
  }

  .gradient-color-bg {
    width: 100%;
    height: 418px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
  }


  .invite-list-count-down-box {
    /* 	background: pink; */
    position: absolute;
    top: 116px;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding-left: 30px;
    .header-left-top-box {
      display: flex;
      margin-bottom: 15px;

      .invite-box,
      .scan-box {
        width: fit-content;
        height: 40px;
        line-height: 40px;
        padding: 5px 15px 5px 10px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        font-size: 22px;

        img {
          width: 24px;
          height: 24px;
        }

        p {
          font-size: 24px;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: 16px;
        }
      }
    }
  }

  .invite-pancel {
    margin-right: 30px;
    margin-bottom: 10px;
  }



  .more_live_btn {
    margin-top: 14px;
    margin-bottom: 20px;
  }

  .front-pictures-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .front-img-top {
    width: 100%;
    height: 280px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .front-img-bottom {
    width: 100%;
    height: 630px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*   display: inline-block;
      background-size: contain; */
  }

  .front-bottom,
  .front-top {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .ps-box /deep/ .interaction-right-box{
    bottom: 175px;
  }
  /* 快捷消息回复 */
  .quickMessage{
    position: absolute;
    bottom: 184px;
    padding-left: 30px;;
    width: 520px;
    height: 40px;
    overflow-x: scroll;
    overflow-y: hidden;
    z-index: 13;
  }
  .quickMessage ul{
    height: 40px;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .quickMessage ul li{
    height: 32px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 1px solid #979797;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;
    padding: 0 10px 0 11px;
  }
  .quickMessage ul li:not(:nth-child(1)){
    margin-left: 15px;
  }
  .canvas-box {
  	width: 646px;
  	height: 992px;
  	margin: 0 auto;
  	background: white;
  	display: none;
  	position: absolute;
  	top: 20px;
  	left: 20px;
  	z-index: 2222;
  	border-radius: 26px;
  }
  .canvas-img{
  	width: 646px;
  	height: 992px;
  	position: absolute;
  	top: 200px;
  	left: 100px;
  	z-index: 2333;
  }
  .colltect-live {
    padding: 5px 10px;
    border-radius: 23px;
    line-height: 25px;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .colltect-live-red {
    background: linear-gradient(223deg, #FF3088 0%, #FE4858 100%);
  }
  .colltect-live-gray {
    background: #999999;
  }
  .SummaryActionSheetBox-enter-active,
  .SummaryActionSheetBox-leave-active {
  transition: all 0.3s ease; /* 自定义过渡时间 */
}

  .SummaryActionSheetBox-enter,
  .SummaryActionSheetBox-leave-to {
  opacity: 0;
  transform: translateY(-100%); /* 这里可以根据实际需求调整弹窗隐藏时的位置偏移量 */
}
</style>
